<template>
  <div class="NavBar">
    <ul>
      <li v-for="(item, index) in Navigations" :key="index">
        <router-link
          :to="{ name: 'PictrueList', params: { category: item } }"
          >{{ item }}</router-link
        >
      </li>
    </ul>
  </div>
  <div class="PcitrueItem" @scroll="lazyLoad()">
    <ul ref="a">
      <li v-for="item in content" :key="item.id" class="imgwrapper">
        <img
          src="../../../assets/loadin.gif"
          :data-src="item.imglink"
          class="imgItem"
          @click="imageView(item.imglink)"
        />
      </li>
    </ul>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
export default {
  name: "PictrueList",
  //在父组件的引用标签将message的值传入
  props:['message'],
  //在向父组件传值需要将自定义的方法传出去
  emits:['changetitle'],
  data() {
    return {
      content: [],
      Navigations: [
        "全部",
        "自然风光",
        "赛博朋克",
        "浩瀚星空",
        "空间设计",
        "星际公民",
        "平面插画",
      ],
    };
  },
  methods: {
    lazyLoad: function () {
      let li = document.getElementsByClassName("imgwrapper");
      let linum = document.getElementsByClassName("imgwrapper").length;
      let div = document.getElementsByClassName("PcitrueItem")[0];
      let n = 0;
      let initHeight = document.documentElement.clientHeight;
      let scrollHeight = div.scrollTop;
      for (let i = n; i < linum; i++) {
        if (li[i].offsetTop < initHeight + scrollHeight) {
          setTimeout(() => {
            li[i].getElementsByTagName("img")[0].src = li[i]
              .getElementsByTagName("img")[0]
              .getAttribute("data-src");
          }, 500);
          n = i + 1;
        }
      }
    },
    changeCategory: function (category) {
      let div = document.getElementsByClassName("PcitrueItem")[0];
      div.scrollTop = 0;
      this.axios
        .get("getImgs.php?category=" + category)
        .then((response) => {
          this.content = response.data;
          this.lazyLoad();
        })
        .catch((e) => {
          console.log(e);
        });
      //console.log(category);
      this.$emit("changetitle",category)
    },
    imageView: function (src) {
      let links = [];
      this.content.forEach((element) => {
        links.push(element.imglink);
      });
      let position = links.indexOf(src);
      ImagePreview({
        images: links,
        startPosition: position,
      });
    },
  },
  mounted() {
    setTimeout(() => {
      this.lazyLoad();
    }, 200);
  },
  created() {
    console.log(this.$nextTick(()=>{document.getElementsByClassName("imgwrapper")}))
    console.log(this.$route.params.category);
    this.axios
      .get("getImgs.php?category="+this.$route.params.category)
      .then((response) => {
        this.$nextTick(() => {
          this.content = response.data;
          //console.log(this.content);
        });
      })
      .catch((e) => {
        console.log(e);
      });
  },
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
  //只有当前组件被复用,路由变化时调用
  beforeRouteUpdate(to, from) {
    //console.log(to.params);
    this.changeCategory(to.params.category);
  },
};
</script>

<style scoped>
.PcitrueItem {
  width: 100%;
  height: 80vh;
  overflow: auto;
}
.imgwrapper {
  width: 100%;
  /* height: 500px; */
  margin-bottom: 30px;
  vertical-align: middle;
  /* line-height: 500px; */
}
.imgItem {
  vertical-align: middle;
  width: 100%;
  /* 宽设为100%object-fit为none即可 */
  object-fit: contain;
  /* height: 100%; */
}
.NavBar {
  width: 100%;
  height: 40px;
  line-height: 40px;
  white-space: nowrap;
  border-bottom: 1px solid #aaaaaa;
}
.NavBar ul {
  width: auto;
  overflow-x: auto;
  white-space: nowrap;
  padding-left: 20px;
}
.NavBar ul li {
  display: inline-block;
  margin-right: 20px;
}
.NavBar a {
  color: black;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}
</style>
